﻿<!DOCTYPE>  
<html>  
<meta charset="utf-8">  
<head>  
<title>无缝滚动</title>  
<style>  
* {margin:0; padding:0;}  
li{list-style: none;}
a{text-decoration: none;}
img{width:200px;height:200px;}
#div1{width:800px;height:200px;overflow:hidden;position: relative;top:50px;left:0}
#div1 ul{position: absolute;top:0;left: 0;}
#div1 ul li{float:left;width:200px;height:200px}

</style>  
<script>  
window.onload=function()  
{   var speed = -2;
	var div1 = document.getElementById("div1");
	var oUl = document.getElementsByTagName("ul")[0];
	var aLi = document.getElementsByTagName("li");
	var aList = document.getElementsByTagName("a"); 
	oUl.style.width=aLi[0].offsetWidth*aLi.length+'px';
	function timer(){
		console.log("aaaa")
   		oUl.style.left = oUl.offsetLeft + speed + "px";
   		if(oUl.offsetLeft<-800){
   			oUl.style.left = 0;
   		}
   		if(oUl.offsetLeft>0){
   			oUl.style.left = -800 +"px";
   		}
   }
   var t = setInterval(timer,30);
   div1.onmouseover = function(){
   		clearInterval(t);
   }
    div1.onmouseout = function(){
   		t = setInterval(timer,30)
   }
   aList[0].onclick = function(){
   		 speed = -2;
   }
   aList[1].onclick = function(){
   		 speed = 2;	
   }
}  
</script>  
  
</head>  
  
<body>  
<a href="#">跟着我一起向左走</a> 
<a href="#">跟着我一起向右走</a>  
<div id="div1">  
    <ul>  
        <li><img src="images/001.jpg"/></li>  
        <li><img src="images/002.jpg"/></li>  
        <li><img src="images/003.jpg"/></li>  
        <li><img src="images/004.jpg"/></li>
        <li><img src="images/001.jpg"/></li>  
        <li><img src="images/002.jpg"/></li>  
        <li><img src="images/003.jpg"/></li>  
        <li><img src="images/004.jpg"/></li>
    </ul>  
</div>  
  
</body>  
</html>  